<template>
  <el-container style="flex-direction:column;">
    <el-form :inline="true" :model="formInline" size="mini" class="demo-form-inline">
      <el-form-item label="">
        <el-input v-model="formInline.username" placeholder="请输入店员名称搜索"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-select clearable v-model="formInline.storeId" placeholder="请选择门店">
          <el-option
            v-for="item in dialogStoreList"
            :key="item.storeId"
            :label="item.name"
            :value="item.storeId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="success" icon="el-icon-search" @click="onSubmit">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" icon="el-icon-refresh-left" @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row style="padding-bottom: 10px;">
      <el-button v-if="getMenuListByPath.add" type="primary" size="mini" icon="el-icon-plus" @click="add">新增</el-button>
      <el-button v-if="getMenuListByPath.delete" type="danger" size="mini" icon="el-icon-delete" :disabled="multipleSelection.length == 0" @click="deleteHandleClick">删除</el-button>
    </el-row>
    <el-table
      @selection-change="selectionChange"
      :data="tableData.records" size="mini"
      style="width: 100%">
      <el-table-column align="center" header-align="center"
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        type="index">
      </el-table-column>
      <el-table-column align="center" header-align="center"
        prop="name"
        label="所属门店">
      </el-table-column>
      <el-table-column align="center" header-align="center"
        prop="username"
        label="店员名称">
      </el-table-column>
      <el-table-column v-if="getMenuListByPath.delete" label="操作" width="160" align="center" header-align="center" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)" icon="el-icon-delete"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top: 8px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="tableData.current"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="tableData.size"
      layout="total, prev, pager, next, sizes,jumper"
      :total="tableData.total">
    </el-pagination>
    <Clerk_add_or_update_dialog
      :title="title" 
      :form="clerkDialogForm"
      :storeList="dialogStoreList"
      :visible.sync="visible" 
      @closeDialog="closeDialog"
      @operationFrom="operationFrom"
    ></Clerk_add_or_update_dialog>
  </el-container>
</template>

<script>
import {getAllClerk,deleteClerk,deleteManyClerk} from '@/api/modules/StoreManagement/clerkManagement.js'
import {getAllStore} from '@/api/modules/StoreManagement/storeList.js'
import Clerk_add_or_update_dialog from "./components/Clerk_add_or_update_dialog.vue";
export default {
  props:["getMenuListByPath"],
  components:{
    Clerk_add_or_update_dialog
  },
  data() {
    return {
      formInline: {
        username: "",
        storeId: "",
      },
      title:"",
      visible: false,
      currentPage:1,
      tableData:[],
      multipleSelection: [],
      size:5,
      dialogStoreList:[],
      clerkDialogForm:{},
    }
  },
  created(){
    this.getAllClerk(1,this.size)
    this.getAllStore()
  },
  methods: {
    onSubmit() {
      // console.log('submit!');
      this.getAllClerk(1,this.size)
    },
    onReset(){
      this.formInline = {
        username: "",
        storeId: "",
      }
      this.getAllClerk(1,this.size)
    },
    //表格删除
    handleDelete(index, row) {
      console.log(index, row);
      deleteClerk(row).then(()=>{
        this.getAllClerk(1,this.size)
      })
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.size = val
      this.getAllClerk(1,val)
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.getAllClerk(val,this.size)
    },
    selectionChange(val){
      this.multipleSelection = val;
    },
    //删除按钮点击事件
    deleteHandleClick(){
      deleteManyClerk(this.multipleSelection).then(()=>{
        this.getAllClerk(1,this.size)
      })
    },
    //打开dialog
    add(){
      this.getAllStore()
      this.clerkDialogForm={
        "userId":null,
        "username":null,
        "storeId":null,
      }
      this.title="新增门店店员";
      this.visible=true;
    },
    //关闭dialog
    closeDialog(){
      this.visible=false;
       this.clerkDialogForm={
        "userId":null,
        "username":null,
        "storeId":null,
      }
    },
    //操作dialog表单，刷新数据
    operationFrom(){
      this.closeDialog();
      this.getAllClerk(1,this.size);
    },
    getAllClerk(current,size){
      let data =  {
        "current":current,
        "size":size,
        "storeId": this.formInline.storeId,
        "username": this.formInline.username
      }
      getAllClerk({clerkPagingDTO:JSON.stringify(data)}).then(res=>{
        this.tableData = res.data.data
      })
    },
    getAllStore(){
      getAllStore().then(res=>{
        this.dialogStoreList = res.data.data
      })
    }
  } 
}
</script>

<style>

</style>